<template>
    <div class="statisticalAnalysis">
        <el-row>
            <el-col :span="12" class="card-box">
                <el-card>
                    <div id="handheldMachine"></div>
                </el-card>
            </el-col>
            <el-col :span="12" class="card-box">
                <el-card>
                    <div id="radioFrequency"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { equipmentUseData } from "@/api/meter/statisticalAnalysis"

export default {
    data() {
        return {
            handheldMachine: null,
            radioFrequency: null
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            equipmentUseData().then(response => {
                if (response.code == 200) {
                    let machineData = response.data.handsetData
                    let doorData = response.data.doorData
                    machineData.forEach(item => {
                        item.labelLine = { show: true }
                        item.label = { show: true }
                    });
                    doorData.forEach(item => {
                        item.labelLine = { show: true }
                        item.label = { show: true }
                    })
                    this.radioFrequency = this.$echarts.init(document.getElementById("radioFrequency"))
                    this.radioFrequency.setOption({
                        color: ["#5470C6", "#00A39F", "#51BBFF"],
                        title: {
                            text: '手持机数量统计饼状图',
                            left: 'center',
                        },
                        tooltip: {
                            trigger: 'item',
                            // formatter: "{b}:{d}%"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            textStyle: {
                                fontSize: "14",
                                lineHeight: "30"
                            }
                        },
                        series: [{
                            name: '手持机数量',
                            type: 'pie',
                            radius: '70%',
                            data: machineData,
                            label: {
                                fontSize: "14",
                                normal: {
                                    formatter: function (e) {
                                        let data = e.data;
                                        if (data.value == 0) {
                                            data.labelLine.show = false;
                                            data.label.show = false;
                                        } else {
                                            return data.name
                                        }
                                    },
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    })
                    this.handheldMachine = this.$echarts.init(document.getElementById("handheldMachine"))
                    this.handheldMachine.setOption({
                        color: ["#7384F2", "#54DCDD", "#7ED3F4"],
                        title: {
                            text: '射频门数量统计饼状图',
                            left: 'center',
                        },
                        tooltip: {
                            trigger: 'item',
                            // formatter: "{b}:{d}%"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            textStyle: {
                                fontSize: "14",
                                lineHeight: "30"
                            }
                        },
                        series: [{
                            name: '射频门数量',
                            type: 'pie',
                            radius: '70%',
                            data: doorData,
                            label: {
                                fontSize: "14",
                                normal: {
                                    formatter: function (e) {
                                        let data = e.data;
                                        if (data.value == 0) {
                                            data.labelLine.show = false;
                                            data.label.show = false;
                                        } else {
                                            return data.name
                                        }
                                    },
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.statisticalAnalysis {
    #handheldMachine {
        height: 300px;
    }

    #radioFrequency {
        height: 300px;
    }

    .card-box {
        margin-top: 30px;
    }
}
</style>

